<template name="order-view">
    <view class="container">
        <u-image
            :src="orderProduct.mainImg"
            width="198rpx"
            height="198rpx"
        ></u-image>
        <view class="order-info">
            <u-text
                :text="orderProduct.name"
                :lines="2"
                size="28rpx"
                block
                color="#000000"
            ></u-text>
            <view v-if="orderProduct.type != 'shop' && isShowTags == '1'" class="nft-tag"></view>
            <view v-else class="shop-tag"></view>
            <u-text
                v-if="orderProduct.specName"
                :text="'数量 x '+orderProduct.number+' '+orderProduct.specName"
                size="24rpx"
                block
                color="#000000"
            ></u-text>
            <u-text
                v-else
                :text="'数量 x '+orderProduct.number"
                size="24rpx"
                block
                color="#000000"
            ></u-text>
            <view class="price">
                <view class="label">
                    <u-text
                        text="总价"
                        size="24rpx"
                        color="#000000"
                    ></u-text>
                </view>
                <view class="value">
                    <u-text
                        :text="orderPrice"
                        size="30rpx"
                        mode="price"
                        bold
                        color="#000000"
                    ></u-text>
                </view>

            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: "order-view",
    props: {
        orderProduct: {
            type: Object,
            default: {}
        },
        orderPrice: {
            type: Number,
            default: '0.00'
        }
    },
    computed: {
        isShowTags() {
            return this.$store.getters.isShowTags
        }
    }
}
</script>
<style lang="scss" scoped>
    .container{
        display: flex;
        .order-info {
            flex: auto;
            margin-left: 20rpx;
        }
        .nft-tag {
            width: 100rpx;
            height: 40rpx;
            background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/967825cfb630bf72832c10b8d3ed3d64ad249bc8.png) no-repeat;
            background-size: 100% 100%;
            margin: 20rpx 0 10rpx 0;
        }
        .shop-tag {
            width: 100rpx;
            height: 36rpx;
            margin: 20rpx 0 10rpx 0;
        }
        .price {
            .label {
                display: inline-block;
            }
            .value {
                display: inline-block;
            }
        }
    }
</style>
